﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/x-ico" href="../static/img/LOGO.png" />
    <title>融脉</title>
    <style>
        body {
            /* background: linear-gradient(to right, #000, #fff); */
            width: 100%;
            height: 100%;
            margin: 0;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .head .logo {
            margin-top: 20px;
            margin-left: 70px;
            width: 100px;
        }
        .box {
            width: 100%;
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        .imgList {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 1s !important;
        }
        .imgList > a {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
        }
        .imgList > a > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            flex-shrink: 0;
        }
        .showImg {
            z-index: 9;
        }

        .leftBtn,
        .rightBtn {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 45px;
            color: rgba(0, 0, 0, 0.8);
            z-index: 99;
            cursor: pointer;
        }
        .leftBtn {
            left: 10px;
        }
        .rightBtn {
            right: 10px;
        }
        .btn {
            display: flex;
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 99;
            cursor: pointer;
        }

        .btn > span {
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background: rgba(0, 0, 0, 0.8);
            margin-right: 15px;
            cursor: pointer;
        }

        .btn > span:last-child {
            margin: 0;
        }

        .btn > .checked {
            background-color: #fff !important;
        }

        .content {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .content .introduction {
            position: relative;
            display: flex;

            flex-direction: column;
            margin-top: 20px;
            padding: 0px 150px;
            /* margin-left: 200px; */
        }

        .content .introduction h2 {
            position: relative;
            font-weight: normal;
            text-align: center;
        }

        .content .introduction h2::before {
            display: block;
            content: '';
            width: 50px;
            height: 1px;
            margin-right: -120px;
            position: absolute;
            top: 50%;
            right: 50%;
            background-color: #000;
        }

        .content .introduction h2::after {
            display: block;
            content: '';
            width: 50px;
            height: 1px;
            margin-left: -120px;
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: #000;
        }

        .content .introduction .jieshao {
            margin-top: 10px;
            width: 100%;
        }
        .content .introduction .jieshao p {
            margin-top: 5px;
        }

        /*  */
        .content .main {
            position: relative;
            margin: 20px 0;
        }

        .content .main h2 {
            /* width: 100%; */
            font-weight: normal;
            text-align: center;
            position: relative;
        }

        .content .main h2::before {
            display: block;
            content: '';
            width: 50px;
            height: 2px;
            margin-right: -120px;
            position: absolute;
            top: 50%;
            right: 50%;
            background-color: #000;
        }

        .content .main h2::after {
            display: block;
            content: '';
            width: 50px;
            height: 2px;
            margin-left: -120px;
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: #000;
        }

        .content .main .imgcp {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            padding: 0px 100px;
        }

        .content .main .imgcp img {
            width: 300px;
        }
        .copyright {
            display: block;
            box-sizing: border-box;
            width: 100%;
            background-color: #005f9b;
            text-align: center;
            line-height: 160%;
            padding: 10px 0px;
            font-size: 12px;
        }

        .copyright a {
            color: #fff;
            text-decoration: none;
            /* font-size: 12px; */
        }

        .copyright .mingcheng {
            color: #fff;
        }

        .copyright .beian {
            margin-left: 10px;
        }

        .buttom {
            background-color: #333333;
            display: flex;
            width: 100%;
            justify-content: space-around;
            color: #fff;
            padding: 20px 0;
        }

        .buttom .About_Us {
            color: #fff;
        }

        .buttom .About_Us h3 {
            font-weight: 400;
            /* text-align: center; */
            margin-bottom: 10px;
            font-size: 16px;
        }

        .buttom .About_Us div {
            font-size: 12px;
        }

        .buttom .xifen div {
            font-size: 12px;
        }

        .buttom .connection div {
            font-size: 12px;
        }

        .buttom .xifen h3 {
            font-weight: 400;
            /* text-align: center; */
            margin-bottom: 10px;
            font-size: 16px;
        }

        .buttom .connection h3 {
            font-weight: 400;
            /* text-align: center; */
            margin-bottom: 10px;
            font-size: 16px;
        }

        .buttom .xifen {
            width: 300px;
        }
    </style>
</head>
<body>
<div class="head">
    <img src="../static/img/LOGO.png" alt="" class="logo" />
</div>
<!-- 轮播图 -->
<div class="box">
    <div class="imgList">
        <a href="#" class="showImg">
            <img src="../static/img/lbt1.png" alt="" />
        </a>
        <a href="#">
            <img src="../static/img/lbt2.png" alt="" />
        </a>
        <a href="#">
            <img src="../static/img/lbt3.png" alt="" />
        </a>
    </div>
    <span class="leftBtn">&lt;</span>
    <span class="rightBtn">&gt;</span>
    <div class="btn">
        <span class="checked"></span>
        <span></span>
        <span></span>
    </div>
</div>
<!-- 内容 -->
<div class="content">
    <div class="introduction">
        <h2>公司介绍</h2>
        <div class="jieshao">
            <p>
                北京圆形圈子科技有限公司，融合人脉，采用实名身份认证体系，通过真实员工产生的职场信息，发展出了两大核心业务：内容社区和人脉服务。
            </p>
            <p>
                内容社区是现实职场空间的网络映射。脉脉通过同事圈、行业圈、工种圈、推荐、热榜、门道、公司点评等丰富的内容版块，帮助职场人做好职业选择，助力职业成长。脉脉为企业提供丰富的人脉连接服务：人才、雇主品牌服务、专家网络服务、会员服务，满足不同场景下的客户需求。 
            </p>
            <p>
                通过内容社区与人脉服务为职场人创造新鲜事、新成长、新点评、新机遇四重价值。
            </p>
            <p>
                已经覆盖IT互联网、人工智能、新能源汽车、芯片、生物医药、审计、文化传媒、房地产、制造业、教育培训等各行各业。。
            </p>
        </div>
    </div>
    <div class="main">
        <h2>主要内容</h2>
        <div class="imgcp">
            <img src="../static/img/zy1.png" alt="" />
            <img src="../static/img/zy2.png" alt="" />
            <img src="../static/img/zycp3.jpg" alt="" style="width: 400px" />
        </div>
    </div>
</div>
<!-- 底部 -->
<div class="buttom">
    <div class="About_Us">
        <h3>关于我们</h3>
        <div style="font-size: 14px">清新资金资产人脉圈</div>
        <div>免费进5个细分群</div>
    </div>
    <!-- <div class="xifen">
      <h3>人脉细分群</h3>
      <div>
        银行1-32群，信托1-6群，融资租赁1-9群，保理1-7群，供应链金融1-16群，小贷1-3群，证券1-23期，私募基金1-12群，汽车金融1-14群，担保公司1-7群，消费金融1-13群，产业金融1-23群等
      </div>
    </div> -->
    <div class="connection">
        <h3>联系人</h3>
        <div>江与琴 17344406671</div>
    </div>
</div>
<div class="copyright">
    <span class="mingcheng">&copy;北京圆形圈子科技有限公司</span>
    <a
            target="_blank"
            class="beian"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502053650"
    >京公网安备11010502053650号</a
    >
    <a href="https://beian.miit.gov.cn/" target="_blank" class="beian"
    >京ICP备2023024981号</a
    >
</div>
<script>
    window.onload = function () {
        var imgList = document.querySelectorAll('.imgList>a')
        var btnList = document.querySelectorAll('.box>.btn>span')
        var lbtn = document.querySelector('.leftBtn')
        var rbtn = document.querySelector('.rightBtn')
        var time = 3000
        var index = 0
        var dingshiqi
        start()
        function start() {
            dingshiqi = setInterval(function () {
                index == imgList.length - 1 ? (index = 0) : index++
                switchPublic()
            }, time)
        }
        function switchPublic() {
            for (var i = 0; i < imgList.length; i++) {
                imgList[i].classList.remove('showImg')
                btnList[i].classList.remove('checked')
            }
            imgList[index].classList.add('showImg')
            btnList[index].classList.add('checked')
        }
        lbtn.onclick = function () {
            clearInterval(dingshiqi)
            index == 0 ? (index = imgList.length - 1) : index--
            switchPublic()
            start()
        }
        rbtn.onclick = function () {
            clearInterval(dingshiqi)
            index == imgList.length - 1 ? (index = 0) : index++
            switchPublic()
            start()
        }
        for (let i = 0; i < btnList.length; i++) {
            btnList[i].onclick = function () {
                clearInterval(dingshiqi)
                index = i
                switchPublic()
                start()
            }
        }
    }
</script>
</body>
</html>
